<script setup>
import { ref, computed, watch, defineEmits, defineProps } from 'vue'
import Box from "./input.vue";

// 定义组件名称
defineOptions({
  name: "vnp-keyboard",
  components: {
    "vnp-input-box": Box,
  },
})

// 定义 props
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  value: {
    type: String,
    default: "",
  },
  keybordType: {
    type: String,
    default: "cn",
  },
})

// 定义 emits
const emit = defineEmits(['update:show', 'input', 'del'])

// 响应式数据
const val = ref(props.value)
const type = ref('cn')
const cn = [
  ["京", "津", "沪", "渝", "冀", "豫", "云", "辽", "黑", "湘"],
  ["皖", "鲁", "新", "苏", "浙", "赣", "鄂", "桂", "甘", "晋"],
  ["蒙", "陕", "吉", "闽", "贵", "粤", "青", "藏", "川", "宁"],
  ["type", "琼", "使", "领", "学", "", "", "", "del"],
]
const en = [
  ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
  ["Q", "W", "E", "R", "T", "Y", "U", "O", "P"],
  ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
  ["type", "Z", "X", "C", "V", "B", "N", "M", "del"],
]

// 计算属性
const visible = computed({
  get() {
    return props.show
  },
  set(val) {
    emit('update:show', val)
  }
})

const list = computed(() => {
  return type.value === "en" ? en : cn
})

// 监听器
watch(() => props.show, (newVal) => {
  if (newVal) {
    val.value = props.value
  }
})

watch(() => props.keybordType, (newVal) => {
  type.value = newVal
})

// 方法
const handleChangeType = () => {
  type.value = type.value === "en" ? "cn" : "en"
}

const handleClickKey = (keyVal) => {
  if (keyVal) {
    emit("input", keyVal)
  }
}

const handleDel = () => {
  emit("del")
}

const finish = () => {
  visible.value = false
}
</script>

<template>
  <van-action-sheet v-model:show="visible" :close-on-click-overlay="false" close-on-popstate :overlay="false"
    get-container=".addCar">
    <div class="vnp-header">
      <button type="button" class="vnp-btn-finish" @click="finish">完成</button>
    </div>

    <div class="vnp-keys">
      <div class="vnp-keys-row" v-for="(item, index) in list" :key="index">
        <div class="vnp-btn-key-wrapper" v-for="(val, idx) in item" :key="idx" :class="{
          'vnp-del-wrapper': val === 'del',
          'vnp-type-wrapper': val === 'type',
        }">
          <van-button v-if="val === 'type'" class="vnp-btn-key" @click="handleChangeType">
            <span v-if="type === 'cn'">中/<span class="vnp-smaller">英</span></span>
            <span v-else><span class="vnp-smaller">中</span>/英</span>
          </van-button>

          <van-button v-else-if="val === 'del'" class="vnp-btn-key" @click="handleDel">
            <van-icon name="close" class="btn_icon" />
          </van-button>

          <van-button v-else class="vnp-btn-key" :class="{ 'vnp-btn-empty': !val }" @click="handleClickKey(val)">
            {{ val }}
          </van-button>
        </div>
      </div>
    </div>
  </van-action-sheet>
</template>


<style lang="less" scoped>
.vnp-header {
  min-height: 80px;
  padding: 10px 0;
  position: relative;

  .vnp-btn-finish {
    position: absolute;
    right: 0;
    height: 100%;
    padding: 0 16px;
    color: red;
    font-size: 44px;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
}

.vnp-input-box-outer {
  width: 82%;
  max-width: 600px;
  margin: 0 auto;
  padding: 10px;
}

.vnp-keys {
  padding: 3px;
  background: #f2f3f5;
  padding-bottom: 22px;

  .vnp-keys-row {
    display: flex;
    justify-content: center;
  }

  .vnp-btn-key-wrapper {
    flex: 0 1 calc((100% - 6px * 10) / 10);
    padding: 3px;
    box-sizing: content-box;

    &.vnp-del-wrapper,
    &.vnp-type-wrapper {
      flex: 1;
    }

    &.vnp-type-wrapper {
      .vnp-smaller {
        color: #999;
        font-size: 12px;
      }
    }

    .vnp-btn-key {
      padding: 0;
      width: 100%;
      border-radius: 4px;
    }

    .vnp-btn-empty {
      background: transparent;
      border: none;
    }

    .vnp-delete-icon {
      width: 18px;
      vertical-align: middle;
    }
  }
}

.btn_icon {
  font-size: 44px;
}
</style>
